| Conditions | 11 | 
| Total Lines | 111 | 
| Code Lines | 88 | 
| Lines | 0 | 
| Ratio | 0 % | 
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like HistoryMap.tsx ➔ HistoryMap often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | import { useState, useEffect } from 'react'; | ||
| 11 | |||
| 12 | |||
| 13 | export default function HistoryMap({navigation, journey, modalVisible, setModalVisible}): any { | ||
| 14 | const [startCoordinates, setStartCoordinates] = useState([]); | ||
| 15 | const [endCoordinates, setEndCoordinates] = useState([]); | ||
| 16 | const [journeyData, setJourneyData] = useState([]); | ||
| 17 | const [startStop, setStartStop] = useState([]); | ||
| 18 | // console.log(journey); | ||
| 19 | |||
| 20 |     useEffect(() => { | ||
| 21 |         function setCoordinates() { | ||
| 22 |             if (modalVisible) { | ||
| 23 | setStartCoordinates(journey['startPosition']); | ||
| 24 | setEndCoordinates(journey['endPosition']); | ||
| 25 | setJourneyData(journey); | ||
| 26 | console.log(startCoordinates); | ||
| 27 | |||
| 28 | console.log(endCoordinates); | ||
| 29 | |||
| 30 | } | ||
| 31 | |||
| 32 | }; | ||
| 33 | |||
| 34 | setCoordinates(); | ||
| 35 | }) | ||
| 36 | |||
| 37 | return ( | ||
| 38 | <Modal | ||
| 39 | animationType="slide" | ||
| 40 |         transparent={true} | ||
| 41 |         visible={modalVisible} | ||
| 42 |         onRequestClose={() => { | ||
| 43 | setModalVisible(!modalVisible) | ||
| 44 | }} | ||
| 45 | > | ||
| 46 |             <View style={styles.container}> | ||
| 47 | |||
| 48 | <MapView | ||
| 49 |                     style={styles.map} | ||
| 50 |                     region={{ | ||
| 51 | latitude: startCoordinates['latitude']? startCoordinates['latitude'] : 0, | ||
| 52 | longitude: startCoordinates['longitude']? startCoordinates['longitude'] : 0, | ||
| 53 | latitudeDelta: 0.05, | ||
| 54 | longitudeDelta: 0.05, | ||
| 55 | }} | ||
| 56 |                     userInterfaceStyle={'dark'} | ||
| 57 | > | ||
| 58 | |||
| 59 |             {startCoordinates ?  | ||
| 60 | <Marker | ||
| 61 |                 coordinate={{latitude: startCoordinates['latitude']? startCoordinates['latitude'] : 0, | ||
| 62 | longitude: startCoordinates['longitude']? startCoordinates['longitude'] : 0 | ||
| 63 | }} | ||
| 64 | /> | ||
| 65 | : | ||
| 66 | <View></View> | ||
| 67 | } | ||
| 68 | |||
| 69 |             {endCoordinates ?  | ||
| 70 | <Marker | ||
| 71 |                 coordinate={{latitude: endCoordinates['latitude']? endCoordinates['latitude'] : 0, | ||
| 72 | longitude: endCoordinates['longitude']? endCoordinates['longitude'] : 0 | ||
| 73 | }} | ||
| 74 | /> | ||
| 75 | : | ||
| 76 | <View></View> | ||
| 77 | } | ||
| 78 | |||
| 79 | |||
| 80 | |||
| 81 | |||
| 82 | |||
| 83 | |||
| 84 | </MapView> | ||
| 85 | |||
| 86 |                 <View style={styles.infoContainer}> | ||
| 87 |                 <Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => setModalVisible(false)}> | ||
| 88 | <Icon | ||
| 89 | name='arrow-left' | ||
| 90 |                         size={25}  | ||
| 91 | color='black' | ||
| 92 | /> | ||
| 93 | </Pressable> | ||
| 94 |                     <View style={styles.info}> | ||
| 95 | |||
| 96 |                         <View style={styles.listInfo}> | ||
| 97 |                             <Text style={styles.infoTitle}>Journey started</Text> | ||
| 98 |                             <Text>{journeyData['date']}</Text> | ||
| 99 | </View> | ||
| 100 | |||
| 101 |                         <View style={styles.listInfo}> | ||
| 102 |                             <Text style={styles.infoTitle}>Information about the trip</Text> | ||
| 103 |                             <Text>{mapModel.calcDistance(startCoordinates[0], startCoordinates[1], endCoordinates[0], endCoordinates[1])} km / {journeyData['totalMin']} min </Text> | ||
| 104 | |||
| 105 |                             <Text> {journeyData['totalPrice']} kr</Text> | ||
| 106 | </View> | ||
| 107 | |||
| 108 |                         <View style={styles.listInfo}> | ||
| 109 |                             <Text style={styles.infoTitle}>ID</Text> | ||
| 110 |                             <Text>{journeyData['_id']}</Text> | ||
| 111 | </View> | ||
| 112 | |||
| 113 |                         <View style={styles.listInfo}> | ||
| 114 |                             <Text style={styles.infoTitle}>Vehicle</Text> | ||
| 115 |                             <Text>{journeyData['scooterName']}</Text> | ||
| 116 | </View> | ||
| 117 | |||
| 118 | </View> | ||
| 119 | </View> | ||
| 120 | </View> | ||
| 121 | </Modal> | ||
| 122 | |||
| 194 |